import React from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
} from 'react-native';

import Config from '../../config';
import SizeUtils from '../../common/SizeUtils';
import TImage from '../../components/TImage';
import BasePage from '../common/BasePage';
import GuahaoConstants from './GuahaoConstants';

//快捷挂号
export default class GuahaoMainPage extends BasePage {
  constructor(props) {
    super(props);

    this._viewWidth = SizeUtils.translateDesignWidthToCode(668);
  }

  render() {
    return(
      <View style={{width:SizeUtils.getWindowSize().width,
          height:SizeUtils.getWindowSize().height, flexDirection:"row", justifyContent:"center"}}>
          <ScrollView style={{paddingTop:Config.paddingTop + SizeUtils.translateDesignHeightToCode(30),
              width:this._viewWidth}} contentContainerStyle={{flexDirection:"column",
                alignItems:"center", }}>
              <View style={{borderColor:"#eeeeee", borderWidth:SizeUtils.translateDesignNumToCode(3),
                  backgroundColor:"#ffffff",
                  shadowColor:"#000000", shadowRadius:SizeUtils.translateDesignNumToCode(10), shadowOffset:
                    {width:SizeUtils.translateDesignNumToCode(0), height:SizeUtils.translateDesignNumToCode(0)},
                    shadowOpacity:0.3}}>
                {this._renderTopImage()}
                {this._renderPageButtons()}
              </View>
          </ScrollView>
          {this._renderNavigationBar()}
      </View>
    )
  }

  _renderTopImage() {
    return (
      <View style={{width:this._viewWidth, flexDirection:"row", justifyContent:"center",
            }}>
        <TImage source={require("../../../resource/images/guahao/jiuyi.png")}
          style={{width:668, height:335}}/>
      </View>
    )
  }

  _renderPageButtons() {
    return (
      <View style={{width:this._viewWidth, flexDirection:"row", flexWrap:"wrap",}}>
        {GuahaoConstants.BUTTONS.map(
          (data, index) => {
            return this._renderPageButton(data, index);
          }
        )}
      </View>
    )
  }

  _renderPageButton(data, index) {
    return (
      <TouchableOpacity key={index} style={{width:SizeUtils.translateDesignWidthToCode(332),
          paddingTop:SizeUtils.translateDesignHeightToCode(40),
          height:SizeUtils.translateDesignHeightToCode(248), flexDirection:"column",
          alignItems:"center", borderColor:"#eeeeee", borderBottomWidth:SizeUtils.translateDesignNumToCode(3),
          borderRightWidth:(index%2 === 0 ? SizeUtils.translateDesignNumToCode(3) : 0)}}
          onPress={() => this._onPress(data)}>
        <TImage source={data.source} style={{width:120, height:120}}/>
        <Text style={{paddingTop:SizeUtils.translateDesignHeightToCode(26),
            fontSize:SizeUtils.translateFontSizeToCode(30)}}>
          {data.name}
        </Text>
      </TouchableOpacity>
    )
  }

  _onPress(data) {
    if(data.jumpUrl === true) {
      this.gotoPage(Config.pages.guahao_hospital_web, {buttonData:data});
    }
    else {
      this.gotoPage(Config.pages.guahao_hospital_list, {buttonData:data});
    }
  }
}
